<template>
  <div class="collect-chart">
    <div>
      <span>近期消费</span>
    </div>
    <div
      id="collectChart"
      style="flex: 1;"
    ></div>
  </div>
</template>

<script lang="ts" setup>
  import echarts from '@/lib/echarts'
  import { markRaw } from 'vue'

  const colEchart = ref<echarts.ECharts | null>(null)

  const createChart = () => {
    const dom = document.getElementById('collectChart')
    colEchart.value = markRaw(echarts.init(dom))
    colEchart.value.setOption({
      xAxis: {
        axisLine: {
          show: false // 关闭轴线
        },
        axisTick: {
          show: false // 关闭刻度线
        },
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        top: 24,
        bottom: 24,
        left: 32,
        right: 24
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: '#d913d8' // 渐变起始色
              },
              {
                offset: 1,
                color: '#2e29cb' // 渐变结束色
              }
            ]),
            width: 4, // 线条宽度
            shadowColor: 'rgba(0,0,0,0.2)',
            shadowBlur: 10,
            shadowOffsetY: 10,
            lineCap: 'round'
          }
        }
      ]
    })
    window.addEventListener('resize', () => setTimeout(() => colEchart.value?.resize(), 0))
  }
  onMounted(() => {
    createChart()
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', () => colEchart.value?.resize())
    colEchart.value?.dispose()
    colEchart.value = null
  })
</script>

<style scoped lang="scss">
  .collect-chart {
    @extend .box;
    height: 350px;
    display: flex;
    flex-direction: column;
  }
</style>
